<template>
  <div id="app" class="welcome-widget">
    <h1>欢迎回来！👋</h1>
    <p>很高兴见到你，今天有什么计划吗？</p>
    <!-- <button @click="showMotivation">获取灵感</button> -->
    <!-- <p v-if="motivationMessage" class="motivation-message">{{ motivationMessage }}</p> -->
  </div>
</template>

<script  setup>
import { ref  } from 'vue';


const motivationMessage = ref('');
const messages = [
      '相信自己，你可以做到！',
      '今天是开始新挑战的好日子！',
      '保持微笑，迎接每一个机会！',
      '每一天都是新的开始，加油！',
    ];

const showMotivation = () => {
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
      motivationMessage.value = randomMessage;
};

    


</script>

<style scoped>
#welcome-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 占满视口高度 */
  color: #ffffff;
  font-family: Arial, sans-serif;
  text-align: center;
  background: transparent;
}

.welcome-widget {
  background: transparent;
  border-radius: 15px;
  padding: 20px 30px;
}

h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #cce7ff; /* 蓝色系标题 */
}

p {
  font-size: 1.2rem;
  margin: 10px 0 20px;
  color: #d6eaff; /* 蓝色系文字 */
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  color: #ffffff;
  background: rgba(0, 123, 255, 0.8); /* 半透明蓝色按钮 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: rgba(0, 123, 255, 1); /* 悬停时颜色增强 */
}

.motivation-message {
  margin-top: 20px;
  font-style: italic;
  color: #b3dcff; /* 蓝色系激励语 */
}
</style>